package com.example.composetutorial.activity

import android.content.res.Configuration
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.composetutorial.R
import com.example.composetutorial.ui.theme.ComposeTutorialTheme

/*
https://developer.android.google.cn/jetpack/compose/tutorial
第 3 课：Material Design
Compose 旨在支持 Material Design 原则。它的许多界面元素都原生支持 Material Design。在本课中，您将使用 Material Design 微件来设置应用的样式。

使用 Material Design
您的消息设计现在已有布局，但看上去还不是特别理想。

Jetpack Compose 原生提供 Material Design 及其界面元素的实现。您将使用 Material Design 样式改进 MessageCard 可组合项的外观。

首先，使用在您的项目中创建的 Material 主题 ComposeTutorialTheme 封装 MessageCard 函数。 要同时在 @Preview 和 setContent 函数中执行此操作。这样一来，可组合项即可集成应用主题中定义的样式，从而在整个应用中确保一致性。

Material Design 是围绕三大要素构建的：Color、Typography、Shape。您将逐一添加这些要素。

注意：Empty Compose Activity 模板会为您的项目生成默认主题，支持您自定义 MaterialTheme。 如果您为项目指定的名称不是 ComposeTutorial，可以在 ui.theme 子软件包的 Theme.kt 文件中找到您的自定义主题。


启用深色主题
您可以启用深色主题（或夜间模式），以避免显示屏过亮（尤其是在夜间），或者只是节省设备电量。由于支持 Material Design，Jetpack Compose 默认能够处理深色主题。使用 Material Design 颜色、文本和背景时，系统会自动适应深色背景。

您可以在文件中以单独函数的形式创建多个预览，也可以向同一个函数中添加多个注解。

添加新的预览注解并启用夜间模式。

浅色和深色主题的颜色选项是在由 IDE 生成的 Theme.kt 文件中定义的。

目前为止，您已创建了一个消息界面元素，它会以不同样式显示一张图片和两项文本，并且在浅色和深色主题下都有良好的视觉效果！

 */
class Base03 : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeTutorialTheme {
                MessageCard(msg = Message3("android", "jetpack component Material Design"))
            }
        }
    }
}

data class Message3(val author: String, val body: String)

@Composable
fun MessageCard(msg: Message3) {

    Row(modifier = Modifier.padding(all = 8.dp)) {

        Image(
            painter = painterResource(id = R.mipmap.icon_nav_mine),
            contentDescription = "我的",
            modifier = Modifier
                .size(50.dp)
                .clip(CircleShape)
                .border(1.5.dp, MaterialTheme.colors.secondary, CircleShape)
        )

        Spacer(modifier = Modifier.width(8.dp))//水平方向间隔

        Column {
            Text(
                text = msg.author,

                //Color
                //通过 MaterialTheme.colors 使用已封装主题中的颜色设置样式。您可以在需要颜色的任意位置使用主题中的这些值。
                //设置标题样式，并为图片添加边框：
                color = MaterialTheme.colors.secondaryVariant,

                //Typography
                //MaterialTheme 中提供了 Material Typography 样式，只需将其添加到 Text 可组合项中即可。
                style = MaterialTheme.typography.subtitle2
            )

            Spacer(modifier = Modifier.height(4.dp))//垂直间隔

            //Shape
            //通过 Shape，我们可以添加最后的“点睛之笔”。首先，将消息正文封装在 Surface 可组合项中。这样即可自定义消息正文的形状和高度。此外，还要为消息添加内边距，以改进布局。
            Surface(shape = MaterialTheme.shapes.medium, elevation = 1.dp) {
                Text(
                    text = msg.body,
                    style = MaterialTheme.typography.body2
                )
            }
        }
    }
}

@Preview(name = "Light Mode")
@Preview(
    uiMode = Configuration.UI_MODE_NIGHT_YES,
//    showBackground = true,
    name = "Dark Mode"
)
@Composable
fun PreviewMessageCard03() {
    ComposeTutorialTheme {
        MessageCard(
            msg = Message3("Colleague", "Hey, take a look at Jetpack Compose, it's great!")
        )
    }
}
